<template>
  <div>
    <ul class="vertical-menu">
      <li class="menu-item" v-for="(menu, menuIndex) in menus" :key="menuIndex" :class="{actived: curMenu == menuIndex}">
        <h2 class="clearfix" @click="onShowToggle(menu, menuIndex)">
          <div class="menu-title">
            <i class="ico-tit"></i>
            <strong>{{menu.oneMenu}}</strong>
          </div>
          <span class="fr"></span>
        </h2>
        <ul class="sub-menu" v-if="curMenu == menuIndex">
          <router-link tag="li"
            class="sub-menu-item"
            v-for="(item, index) in menu.twoList"
            :key="index" 
            :to="`/${item.path}?three=${item.threeMenuCode}&cIndex=${cIndex}`"
            @click.native="onSubClick(menu, item, menuIndex, menu.twoMenuName, item.threeMenuName)">
            <!-- <i class="ico-item"></i> -->
            <strong>{{item.twoMenuName}}</strong>
          </router-link>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { session } from 'js/util'

export default {
  props: {
    title: '',
    menus: {
      type: Array,
      default() {
        return [
          {
            twoMenuName: '系统管理',
            isShow: true,
            threeList: [
              {threeMenuCode: '权限管理', link: '/systemManage/authManage'},
              {threeMenuCode: '角色管理', link: '/systemManage/roleManage'},
              {threeMenuCode: '管理员管理', link: '/systemManage/adminManage'} 
            ]
          },
          {
            twoMenuName: '商品管理',
            isShow: true,
            items: [
              {threeMenuCode: '普通商品列表', link: '/goodsMange/list'},
              {threeMenuCode: '商品录入', link: '/goodsMange/add'},
              {threeMenuCode: '发起拼单', link: '/goodsMange/launch'},
              {threeMenuCode: '拼单商品列表', link: '/goodsMange/launchlist'}         
            ]
          },
          {
            twoMenuName: '分类管理',
            isShow: true,
            items: [
              {threeMenuCode: '通用分类', link: '/classifyMange/list'},
              {threeMenuCode: '展示分类', link: '/classifyMange/show'},
              {threeMenuCode: '类型管理', link: '/classifyMange/type'},
              {threeMenuCode: '商品规格', link: '/classifyMange/specifications'}         
            ]
          },
          {
            twoMenuName: '店铺管理',
            isShow: true,
            items: [
              {threeMenuCode: '店铺列表', link: '/shopMange/list'}             
            ]
          },
          {
            twoMenuName: '会员管理',
            isShow: true,
            items: [
              {threeMenuCode: '会员列表', link: '/memberMange/list'}             
            ]
          },
          {
            title: '员工管理',
            isShow: true,
            items: [
              {name: '员工列表', link: '/employeeMange/list'},
              {name: '员工申请审批', link: '/employeeMange/apply'},
              {name: '员工详情', link: '/employeeMange/detail'},
              {name: '修改密码', link: '/employeeMange/modify'},
              {name: '申请回复查看', link: '/employeeMange/result'}
            ]
          },
          {
            title: '角色管理',
            isShow: true,
            items: [
              {name: '角色列表', link: '/roleMange/list'}
            ]
          },
          {
            title: '菜单管理',
            isShow: true,
            items: [
              {name: '菜单列表', link: '/menuMange/list'}
            ]
          },
          {
            title: '部门管理',
            isShow: true,
            items: [
              {name: '部门列表', link: '/departmentMange/list'}
            ]
          },
          {
            title: '日志管理',
            isShow: true,
            items: [
              {name: '日志列表', link: '/logMange/list'}
            ]
          },
          {
            title: '字典管理',
            isShow: true,
            items: [
              {name: '字典列表', link: '/dictionaryMange/list'}
            ]
          },
          {
            title: '银行卡管理',
            isShow: true,
            items: [
              {name: '银行卡列表', link: '/bankCardMange/list'}
            ]
          },
          {
            title: 'app版本管理',
            isShow: true,
            items: [
              {name: 'app版本', link: '/versionMange/version'}
            ]
          },
          {
            title: '常规设置',
            isShow: true,
            items: [
              {name: '基本信息', link: '/normalSet/base'}
            ]
          },
          {
            title: '运费模板管理',
            isShow: true,
            items: [
              {name: '运费模板列表', link: '/freightMange/list'}
            ]
          },
          {
            title: '广告管理',
            isShow: true,
            items: [
              {name: '广告位列表', link: '/advertMange/position'},
              {name: '广告列表', link: '/advertMange/list'},
              {name: '广告待审核列表', link: '/advertMange/apply'}
            ]
          },
          {
            title: '频道管理',
            isShow: true,
            items: [
              {name: '频道列表', link: '/channelMange/list'}
            ]
          },
          {
            title: '楼层管理',
            isShow: true,
            items: [
              {name: '楼层列表', link: '/floorMange/list'},
              {name: '楼层新增', link: '/floorMange/add'}
            ]
          },
          {
            title: '首页装修',
            isShow: true,
            items: [
              {name: 'PC装修', link: '/homeDecorate/pc'},
              {name: 'APP装修', link: '/homeDecorate/app'},
              {name: '跳转', link: '/homeDecorate/appEdit'}
            ]
          },
          {
            title: '导航管理',
            isShow: true,
            items: [
              {name: '导航列表', link: '/navigationMange/list'}
            ]
          }
        ]
      }
    }
  },
  data() {
    return {
      curMenu: 0,
      activedClass: '',
      cIndex: '',
      isShow: false
    }
  },
  created() {
    this.cIndex = session.get('curMenuIndex')
    if (session.get('curMenuSelect')) {
      this.curMenu = session.get('curMenuSelect').menuIndex
    } else {
      this.curMenu = 0
    }
    // if (this.$route.query.three) {
    //   this.menus.forEach(menu => {
    //     this.$set(menu, 'isShow', this.isShow)
    //     menu.threeList.forEach(item => {
    //       if (this.$route.query.three === item.path) {
    //         menu.isShow = true
    //       }
    //     })
    //   })
    // }
  },
  methods: {
    ...mapActions(['setBreads']),
    onShowToggle(menu, index) {
      this.menus.forEach((menu, i) => {
        if (index !== i) {
          this.curMenu = index
        }
      })
    },
    onSubClick(menu, item, menuIndex, two, three) {
      session.set('curMenuSelect', {menuIndex: menuIndex, twoMenu: two, threeMenu: three}) // 保存当前选中的菜单
      const cIndex = session.get('curMenuIndex')
      let breads = [{twoMenuName: menu.twoMenuName, link: '#'}]
      breads.push({
        threeMenuName: item.threeMenuName,
        link: `${item.path}?three=${item.threeMenuCode}&cIndex=${cIndex}` || '#'
      })
      this.setBreads(breads)
    }
  },
  watch: {
    /**
     * 点击一级导航，默认重置菜单
     */
    menus(newVal, oldVal) {
      if (newVal != oldVal) {
        this.curMenu = 0
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '../../scss/_var.scss';
  .m-menu {
    width: 168px;
    display: inline-block;
    height:46px;
    line-height: 46px;
    border-left: 3px solid $color-main;
    border-top: 1px solid #D7D7D7;
    border-bottom: 1px solid #D7D7D7;
    border-right: 1px solid #D7D7D7;
    margin-bottom: 10px;
    & > span {
      padding-left: 14px;
      font-weight: bold;
      font-size: 16px;
    }
  }
  .vertical-menu {
    width: 168px;
    color: #bfcbd9;
    background: #fff;
    border: 1px solid #d8d8d8;
    // overflow-y: auto;
    // overflow-x: hidden;
  }
  
  .menu-item {
    &.actived {
      span {
        transform: rotate(-180deg);
      }
    }
    h2 {
      position: relative;
      height: 46px;
      line-height: 46px;
      font-weight: 500;
      background: #F2F2F2;
      font-size: 0;
      cursor: pointer;
      text-align: center;
      .menu-title {
        display: inline-block;
      }
      .ico-tit {
        position: absolute;
        left: 14px;
        top: 20px;
        display: inline-block;
        // margin-right: 6px;
        width: 10px;
        height: 10px;
        background-size: 100% 100%;
        background-image: url(../../assets/menu-more.png);
        background-repeat: no-repeat;
        vertical-align: middle;
      }
      strong {
        color: $color-dark;
        font-size: 14px;
        vertical-align: middle;
      }
      span {
        position: absolute;
        right: 14px;
        top: 20px;
        display: inline-block;
        width: 9px;
        height: 7px;
        // margin: 18px 10px 0 0;
        // margin-left: 40px;
        background-repeat: no-repeat;
        background-image: url('../../assets/ico_arrow_down_gray.png');
        vertical-align: middle;
      }
    }
  }
  .sub-menu {
    background: #ffffff;
  }
  .sub-menu-item {
    text-align: center;
    height: 44px;
    font-size: 12px;
    line-height: 44px;
    cursor: pointer;
    color: $color-dark;
    &.router-link-active {
      color: $color-main;
    }
    .ico-item {
      float: left;
      width: 48px;
      height: 46px;
      vertical-align: middle;
    }
    &:hover {
      color: $color-main;
    }
  }
</style>